<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/safeCenter">我的账户&nbsp;&nbsp;>&nbsp;</router-link>
        <router-link to="/outCoins">提币&nbsp;&nbsp;>&nbsp;</router-link>
        <span>提币地址管理</span>
      </p>
      <div class="d1">
        <div>
          <p class="top">币种</p>
          <div class="bottom">
            <el-select v-model="selCoin" placeholder="币种" class="leftValue">
              <el-option
                v-for="item in coinList" :key="item.name" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
        <div>
          <p class="top">提币地址</p>
          <div class="bottom">
            <input type="text" v-model="address" PLACEHOLDER="请输入提币地址">
          </div>
        </div>
        <div>
          <p class="top">备注</p>
          <div class="bottom">
            <input type="text" v-model="remark" placeholder="请输入备注( 可无 )">
          </div>
        </div>
      </div>
      <p class="p2">
        <button @click="add">添加</button>
      </p>
    </section>
    <section id="sec2">
      <p class="title">提币地址列表</p>
      <table>
        <thead>
          <tr>
            <td>币种</td>
            <td>提币地址</td>
            <td>备注</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item , index) in addressList">
            <th>{{item.currency_code}}</th>
            <th>
              <span class="addressItem">
                <img src="../common/imgs/wwmIcon.png" alt="" @mouseenter="showItemWwm(item.wallet_address , $event)" @mouseout="showWWm = false">
                <span>{{item.wallet_address}}</span>
              </span>
            </th>
            <th>{{item.remark}}</th>
            <th>
              <a href="javascript:void 0;" @click="delThis(item)" class="delThis">删除</a>
            </th>
          </tr>
        </tbody>
      </table>
    </section>
    <!--二维码弹窗，公共使用-->
    <div class="abWWm" :style="wwmStyle" style="" v-show="showWWm">
      <span id="qrcode" ref="qrCodeUrl"></span>
    </div>
    <get-phonecode ref="addAddressCode" :openPhoneCode="1" :openTransPws="2" @confirm="addAddressPost"/>
    <danger-dialog ref="digDg" v-bind:element="dialogConfirm" confirmBtn='确认删除' titleTxt="刪除提币地址" @confirm="confirmDel"></danger-dialog>
  </div>
</template>
<script>
  import { outCoinAddressList , addCoinAddress , delCoinAddress} from '../http/api';
  export default {
    name : 'outCoinAddressManager',
    data(){
      return{
        coinList: [{ name : 'BTC'} , { name : 'USDT'} , { name : 'BHP'},{ name : 'LTC'} , { name : 'ETH'}],
        selCoin : 'BTC',
        address : null,
        remark : null,
        addressList: [],
        showWWm : false,
        wwmStyle:{},
        dialogConfirm:'<p style="color: #666;font-size: 16px;text-align: center;line-height: 170%;padding: 0 43px">您确定要刪除该地址吗？</p>',
        del_item : null,
      }
    },
    components:{
      ElSelect :  require('element-ui').Select, /*select*/
      ElOption : require('element-ui').Option, /*Option*/
      DangerDialog : resolve => { require(['../components/DangerDialog'], resolve) },/*确认弹窗*/
      GetPhonecode : resolve => { require(['../components/GetMbcode'], resolve) },/*获取手机验证码弹窗*/
    },
    mounted() {
      this.loadList();
    },
    methods:{
      loadList(){
        outCoinAddressList().then(res => {
          if(res.code == 200){
            this.addressList = res.data.lists;
          }
        });
      },
      showItemWwm(address , e){
        let x = e.clientX;
        let y = e.clientY;
        this.showWWm = true;
        this.wwmStyle = {left : x+20+'px' , top : y-30 +'px'};
        let QRCode = require('qrcodejs2');
        document.getElementById("qrcode").innerHTML = "";
        let thiz = this;
        new QRCode(thiz.$refs.qrCodeUrl, {
          text: address,
          width: 85,
          height: 85,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        });
      },
      delThis(item){
        this.del_item = item;
        this.$refs.digDg.dialogShow();
      },
      confirmDel(){
        let param = {
          id : this.del_item.id
        };
        delCoinAddress(param).then(res => {
          if(res.code == 200){
            require('../common/js/toast').toast('删除成功');
            this.loadList();
          }
        });
      },
      addAddressPost(mbRes){
        let param = {
          sms_code : mbRes.code ,  currency_code : this.selCoin, address : this.address , remark : this.remark || '------',
        };
        addCoinAddress(param).then(res => {
          if(res.code == 200){
            this.loadList();
            this.$refs.addAddressCode.hide();
            require('../common/js/toast').toast('添加成功');
            this.address = null;
            this.remark = null;
          }
        })
      },
      add(){
        let info = null;
        if(!this.address){
          info = '请输入提币地址';
        }
        if(info){
          require('../common/js/toast').toast(info);
          return;
        }
        this.$refs.addAddressCode.dialogShow();
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    >.d1{
      overflow: hidden;padding-top: 58px;
      >div{
        float: left;padding-left: 18px;
        >.top{
          color: #999;font-size: 14px;
        }
        >.bottom{
           padding-top: 14px;
          input, /deep/ input{
            .input;width: 360px;height: 48px;padding: 0 9px;font-size: 14px;border-color: #eee;
          }
        }
        &:first-child{
          padding-left: 0;
          >.bottom /deep/ input{
            width: 150px;
          }
        }
      }
    }
    >.p2{
      padding-top: 14px;
      button{
        .submit;width: 160px;height: 38px;line-height: 38px;font-size: 16px;
      }
    }
  }
  #sec2{
    margin-top: 14px;min-height: 446px;padding-bottom: 40px;
    >.title{
      font-size: 16px;color: #262626;
    }
    >table{
      width: 100%;text-align: left;
      th,td{
        font-weight: 500;
      }
      thead{
        font-size: 14px;color: #999;
        td{
          padding-top: 31px;
          &:last-child{
            text-align: right;
          }
        }
      }
      tbody{
        th{
          padding-top: 22px;font-size: 14px;color: #262626;padding-bottom: 0;
          &:last-child{
            text-align: right;
          }
          .delThis{
            .colorYellow;font-size: 14px;text-decoration: underline;
          }
          .addressItem{
            >img{
              vertical-align: middle;
              &:hover{
                cursor: pointer;
              }
            }
            >span{
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  .abWWm{
    width: 120px;height: 120px;position:fixed;z-index: 1;overflow: hidden;padding: 10px;.borderRadius(5px);background: #fff;
    box-shadow: 0px 0px 20px #c4bebe;
    >span , /deep/ img , /deep/ span{
      width: 100%;height: 100%;padding: 0;margin: 0;display: inline-block;
    }
  }
</style>
